<!--
 * @Author: your name
 * @Date: 2022-03-17 09:38:21
 * @LastEditTime: 2022-04-01 19:15:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \beijing-dushixiang-manyuan\src\page\message\notice\index.vue
-->
 <template>
  <div class="noticemBox_content">
    <!-- <OrderHeader></OrderHeader> -->
    <div style="background: white">
      <el-row type="flex">
        <div style="display: flex">
          <el-col class="finSize" style="width: 53px">运单号</el-col>
          <div>
            <el-input style="width: 200px" v-model="searchParams.waybill_no" />
          </div>
        </div>

        <!-- <el-col class="finSize" style="margin-left:100px;">异常来源</el-col>
         <div style="width:300px">
           <el-select v-model="abnormalType"></el-select>
         </div> -->
        <div style="margin-left: 20px">
          <el-button
            type="primary"
            data-tracker="P46-1"
            @click="handleSearch"
            icon="el-icon-search"
            style="margin: 0px 10px 10px 0px"
            >查询</el-button
          >
          <el-button
            type="primary"
            plain
            data-tracker="P46-2"
            icon="el-icon-refresh"
            @click="handleReset"
            style="margin: 0px 10px 10px 0px"
            >重置</el-button
          >
        </div>
      </el-row>
    </div>

    <div class="noticemBox">
      <div style="margin-bottom: 10px; float: left">
        <el-button
          v-permission="'abnormal_record_delete'"
          type="primary"
          plain
          size="mini"
          icon="el-icon-delete"
          data-tracker="P46-3"
          @click="deleteClickFn"
          :loading="deleteLoading"
        >
          删除
        </el-button>
        <el-button
          v-permission="'abnormal_record_action_deal'"
          type="primary"
          plain
          size="mini"
          data-tracker="P46-4"
          icon="el-icon-edit"
          @click="AbnormalRecordDealFn"
        >
          异常处理
        </el-button>
      </div>
      <div class="right">
        <el-pagination
          background
          style="margin: 0px 0px 10px 0px"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        :max-height="maxheight"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" fixed label="序号" width="50">
        </el-table-column>
        <el-table-column prop="waybill_no" label="运单号" width="280">
        </el-table-column>
        <el-table-column prop="node" label="异常来源" width="180">
          <template slot-scope="scope">
            {{ nodeData[scope.row.node] }}
          </template>
        </el-table-column>
        <el-table-column prop="deal_state" label="异常状态" width="180">
          <template slot-scope="scope">
            {{ scope.row.deal_state === "0" ? "未处理" : "已处理" }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="images" label="异常依据">
          <template slot-scope="scope">
            <span v-for="item, index in scope.row.images" :key="index">
              <img :src="item" style="width:50px;" />
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="create_time" label="异常创建时间" width="180">
          <template slot-scope="scope">
            {{
              new Date(Number(scope.row.create_time) * 1000).toLocaleString()
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="异常原因"
          width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              (
                causeData.find((item) => item.item_code === scope.row.reason) ||
                {}
              ).item_name
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-permission="'abnormal_record_detail'"
              size="mini"
              type="text"
              data-tracker="P46-5"
              @click="handleDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="异常详情"
      :close-on-click-modal="false"
      :visible.sync="abnormalPopDetailShow"
      width="600px"
      :before-close="handleCloseDetail"
    >
      <el-form
        :model="ruleFormdetail"
        :rules="rulesdetail"
        ref="ruleFormdetail"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="运单号" prop="waybill_no" style="width: 300px">
          <el-input v-model="ruleFormdetail.waybill_no" disabled></el-input>
        </el-form-item>
        <el-form-item label="运输环节" prop="node_name" style="width: 300px">
          <span>{{ ruleFormdetail.node_name | afterTime }}</span>
          <!-- <el-select v-model="ruleFormdetail.node_name" disabled>
            <el-option v-for="(item, index) in nodenameData" :key="index" :value="item.item_code" :label="item.item_name"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="异常状态" prop="deal_state" style="width: 300px">
          <el-select v-model="ruleFormdetail.deal_state" disabled>
            <el-option
              v-for="(item, index) in dealstateData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常原因" prop="remark">
          <el-select v-model="ruleFormdetail.remark" disabled>
            <el-option
              v-for="(item, index) in causeData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常数量" prop="number">
          <el-table :data="tableDatList" border style="width: 100%">
            <el-table-column prop="number" label="件数">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量(kg)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.weight" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="volume" label="体积(m³)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.volume" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="package_quantity" label="包装数量">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.package_quantity"
                  disabled
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item
          label="流转到下一环节:"
          prop="is_transfer_next_step"
          style="width: 300px"
        >
          <el-radio v-model="is_transfer_next_step" label="1" disabled
            >是</el-radio
          >
          <el-radio v-model="is_transfer_next_step" label="0" disabled
            >否</el-radio
          >
        </el-form-item>

        <el-form-item label="异常依据" prop="reason">
          <span v-for="(item, index) in imgData" :key="index">
            <img :src="item" style="width: 300px" />
          </span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import "./index.scss";
import OrderHeader from "../components/orderHeader/index.vue";
import {
  AbnormalList,
  DeleteAbnormal,
  AbnormalRecordDetail,
  AbnormalRecordDeal,
} from "@/api/message"; //UpdateAbnormal
import { reqDictionaryOptions } from "@/api/earlywarning";
import { dictionanryList } from "@/page/material/common/common";

export default {
  name: "abnormal",
  components: {
    OrderHeader,
  },
  data() {
    return {
      deleteLoading: false,
      abnormalPopShow: false,
      abnormalPopDetailShow: false,
      ruleFormAB: {
        waybill_no: "",
        node_name: "",
        deal_state: "",
        reason: "",
        remark: "",
      },
      rulesAB: {},
      ruleFormdetail: {
        waybill_no: "",
        node_name: "",
        deal_state: "",
        reason: "",
        remark: "",
      },
      rulesdetail: {},
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      sortFlag: 0, //指定排序方式的
      tableData: [],
      multipleSelection: [],
      editId: "",
      nodeid: "",
      numberData: "",
      nodenameData: [],
      dealstateData: [],
      imgData: [],
      nodeData: {},
      causeData: [],
      searchParams: {},
      tableDatList: [
        {
          number: 0, //件数
          weight: 0, //重量
          volume: 0, //体积
          package_quantity: 0, //包装数量
        },
      ],
      is_transfer_next_step: "",
      maxheight: "auto",
    };
  },
  filters: {
    afterTime(value) {
      switch (value) {
        case "1":
          return "揽收";
        case "3":
          return "干线";
        case "4":
          return "配送";
        case "5":
          return "签收";
        case "6":
          return "回单";
        case "7":
          return "回箱";
      }
    },
  },

  mounted() {
    this.abnormalClickListFn(this.pageNum, this.pageSize);
    this.nodenameDataFn();
    this.dealstateDataFn();
    dictionanryList(["nodetype", "abnormal_cause"]).then((res) => {
      const nodeData = res.data.list["nodetype"];
      this.causeData = res.data.list["abnormal_cause"];
      // nodeData.forEach((item, index) => {
      //   this.nodeData[item.item_code] = item.item_name;
      // });
    });
    this.nodeData = [, "揽收", "仓库", "干线", "配送", "签收", "回单", "回箱"];
  },
  methods: {
    nodenameDataFn() {
      const data = {
        dictionary_code: "areaTypeEnum",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.nodenameData = res.data.list;
          if (this.nodenameData.length > 6) {
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }
        }
      });
    },
    dealstateDataFn() {
      const data = {
        dictionary_code: "deal_state",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.dealstateData = res.data.list;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCloseDetail() {
      this.abnormalPopDetailShow = false;
    },
    //详情接口操作
    handleDetail(val) {
      this.abnormalPopDetailShow = true;
      const dataId = {
        id: val.id,
      };
      AbnormalRecordDetail(dataId).then((res) => {
        if (res.code === 10000) {
          this.ruleFormdetail.waybill_no = res.data.waybill_no;
          this.ruleFormdetail.node_name = res.data.node;
          this.ruleFormdetail.deal_state = res.data.deal_state;
          this.ruleFormdetail.remark = res.data.reason;
          this.imgData = res.data.images;
          this.tableDatList = [
            {
              number: res.data.number, //件数
              weight: res.data.weight, //重量
              volume: res.data.volume, //体积
              package_quantity: res.data.package_quantity, //包装数量
            },
          ];
          this.is_transfer_next_step = res.data.is_transfer_next_step;
        }
      });
    },
    // handleCloseEdit(){
    //   this.abnormalPopShow = false;
    // },
    //编辑接口  数据回显
    // handleEdit(row) {
    //   this.abnormalPopShow = true;
    //   this.editId = row.id;
    //   const dataId = {
    //     id: row.id,
    //   };
    //   AbnormalRecordDetail(dataId).then((res) => {
    //     if (res.code === 10000) {
    //       this.ruleFormAB.node_name = res.data.node
    //       this.ruleFormAB.deal_state = res.data.deal_state
    //       this.ruleFormAB.remark = res.data.remark
    //       this.nodeid = res.data.node_id
    //       this.numberData = res.data.number
    //     }
    //   });
    // },
    //编辑确定按钮
    // determineFn(){
    //   const dataId = {
    //     id: this.editId,
    //     node:this.ruleFormAB.node_name,
    //     node_id:this.nodeid,
    //     reason:this.ruleFormAB.reason,
    //     number:this.numberData,
    //     remark:this.ruleFormAB.remark,
    //   };
    //   UpdateAbnormal(dataId).then((res) => {
    //     if (res.code === 10000) {
    //       this.$message({
    //         type: "success",
    //         message: "异常编辑成功!",
    //       });
    //       this.abnormalClickListFn(this.pageNum, this.pageSize);
    //     }
    //   });
    // },
    //行内删除操作
    handleDelete(valrow) {
      const idsData = [];
      idsData.push(valrow.id);
      const dataId = {
        ids: idsData,
      };
      DeleteAbnormal(dataId).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.abnormalClickListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //批量删除
    deleteClickFn() {
      this.deleteLoading = true;
      if (this.multipleSelection.length > 0) {
        const idsData = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          idsData.push(Number(this.multipleSelection[i].id));
        }
        const dataId = {
          ids: idsData,
        };
        DeleteAbnormal(dataId).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.abnormalClickListFn(this.pageNum, this.pageSize);
            this.deleteLoading = false;
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "请至少选中一项删除!",
        });
        this.deleteLoading = false;
      }
    },

    //异常处理接口函数
    AbnormalRecordDealFn() {
      if (this.multipleSelection.length > 0) {
        const idsData = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          idsData.push(Number(this.multipleSelection[i].id));
        }
        const dataId = {
          ids: idsData,
        };
        AbnormalRecordDeal(dataId).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "异常处理成功!",
            });
            this.abnormalClickListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          type: "warning",
          message: "请至少选中一项异常数据处理!",
        });
      }
    },

    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.abnormalClickListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.abnormalClickListFn(this.pageNum, this.pageSize);
    },
    handleSearch() {
      this.pageNum = 1;
      this.abnormalClickListFn();
    },
    handleReset() {
      this.searchParams = {};
      this.pageNum = 1;
      this.abnormalClickListFn();
    },
    //异常列表
    abnormalClickListFn(pageNumval, pageSizeval) {
      const data = {
        page: this.pageNum,
        page_size: this.pageSize,
        ...this.searchParams,
      };
      AbnormalList(data).then((res) => {
        if (res.code === 10000) {
          this.tableData = res.data.list;
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.noticemBox .allOrderContainer .left .left {
  display: none !important;
}

/deep/.noticemBox .allOrderContainer .left .el-dropdown {
  display: none !important;
}

/deep/.noticemBox .allOrderContainer .left .shouli,
/deep/.noticemBox .allOrderContainer .left .editor,
/deep/.noticemBox .allOrderContainer .left .zuofei,
/deep/.noticemBox .allOrderContainer .left .clearZF,
/deep/.noticemBox .allOrderContainer .left .clearSL,
/deep/.noticemBox .allOrderContainer .left .improtput,
/deep/.noticemBox .allOrderContainer .left .printfacesheet,
/deep/.noticemBox .allOrderContainer .left .printWd,
/deep/.noticemBox .allOrderContainer .left .printYL {
  display: none !important;
}

/deep/.noticemBox .allOrderContainer .displayArea {
  height: calc(~"100% - 230px") !important;
}
.noticemBox_content {
  padding: 10px 15px;
  background-color: #fff;
}
.noticemBox_content .el-tabs--border-card > .el-tabs__content {
  display: none !important;
}

.noticemBox {
  // margin-top: 10px;
  // padding: 0 5px;
  background: #fff;
}
</style>
